<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>组合搭配</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.9.5/driver.min.css">
  <link rel="stylesheet" href="/public/static/plug/ydui/ydui.rem.css" />
  
  <link rel="stylesheet" href="/public/static/css/demo.css?v=1" />
  <!-- 引入rem自适应类库 -->
  <script src="/public/static/plug/ydui/ydui.flexible.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.9.5/driver.min.js"></script>
  <!-- 数据请求 -->
  <script src="/public/static/plug/jquery/jquery.min.js"></script>
</head>

<body>
  <div id="app" v-cloak>
    <div class="product-container">
      <div class="show-product">
        <!-- 产品图展示 -->
        <div class="product-image">
          <img :src="product.a" class="imgA img" />
          <img :src="product.b" class="imgB img" />
          <img :src="product.c" class="imgC img" />
          <img :src="product.d" class="imgD img" />
        </div>

        <!-- 步骤条 -->
        <div class="product-step">
            <yd-step theme="2" :current="currentIndex + 1" current-color="#ef4f4f">
                <yd-step-item v-for="(item, index) in productData" :key="item.cate_name"
                  @click.native="clickStep(index)" :class="{'yd-step-item-current' : currentIndex >= index}">
                    <span slot="top">产品{{index + 1}}</span>
                    <span slot="bottom">{{index == 3 ? '(非必选)' : '(必选)'}}</span>
                </yd-step-item>
            </yd-step>
        </div>
      </div>

      <div class="product-main">
          <div class="choose-product" v-if="currentIndex === index" v-for="(data, index) in productData">
            <!-- 商品选择 -->
            <div class="choose-main">

              <div class="popup-body">

                <!-- 产品名&&产品价格 -->
                <div class="product-info">
                  <p>{{data.cate_name}}</p>
                  <span class="price">￥{{active.price[currentIndex]}}</span>
                </div>

                <div class="product-label">
                  <!-- 产品（系列） -->
                  <div v-for="cate in data.cate_list" 
                    :key="cate.id" 
                    :label="cate.cate_name" class="mt-10">
                      <h3>{{cate.cate_name}}</h3>
                      <div>
                        <span class="labelItem"
                          v-for="shop in cate.shop_list" :key="shop.id"
                          @click="clickSeries(currentIndex, shop)"
                          :class="{'active': shop.id == active.series[currentIndex]}">{{shop.store_name}}</span>
                      </div>
                  </div>

                   <!-- 产品（颜色） -->
                   <div class="mt-10" v-if="list.color && list.color.length != 0">
                    <h3>颜色</h3>
                    <div>
                      <span class="labelItem" v-for="(vals, key) in list.color" @click="clickColor(vals)" 
                        :class="{'active': vals.unique == active.color[currentIndex]}">
                        {{key}}
                      </span>
                    </div>
                  </div>

                  <!-- 尺码 -->
                  <div class="mt-10" v-if="currentIndex == 0 && list.size && list.size.length != 0">
                    <h3>尺码</h3>
                    <div>
                      <span class="labelItem" v-for="(vals, key) in list.size" @click="clickSize(key)" :class="{'active': key == active.size}">{{key}}</span>
                    </div>
                  </div>
                </div>
                
              </div>
            </div>
            <!-- 商品详情 -->
            <div class="product-details" v-if="product.detailImg">
              <yd-cell-item>
                <span slot="left">商品详情</span>
              </yd-cell-item>
              <div class="details-img" v-html="product.detailImg"></div>
            </div>
          </div>
      </div>

      <div class="product-foot">
        <yd-button v-if="currentIndex == 2 || currentIndex == 3" size="large" type="danger" @click.native="submit()">加入购物车</yd-button>
      </div>

      <a href="javascript:;" class="go-top" v-if="isDisplay" @click="goTop()"></a>
    </div>
  </div>

  <!-- 引入 Vue -->
  <script src="/public/static/plug/vue/dist/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="/public/static/plug/ydui/ydui.rem.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          product: {
            a: "/public/static/image/a.png",
            b: "/public/static/image/b.png",
            c: "/public/static/image/c.png",
            d: "/public/static/image/d.png",
            detailImg: '', // 详情图
          },
          isDisplay: false,
          productData: [], // 数据集
          currentIndex: 0, // 当前数据集的索引
          flag: 0,
          flag1: 0,
          active: { // 选中的状态
            price: [0, 0, 0, 0], // 产品价格
            series: [,,,], // 系列
            color: [,,,], // 颜色
            size: '', // 尺码
          },
          list: { // 数据列表
            color: [], // 颜色
            size: [] // 尺码
          },
          params: {
            productId: [], // 商品组合id
            unique: [] // 组合的唯一id
          },
          productValue: {},
          productState: [], // 数据的状态，用于存储上一步下一步的数据
          driver: null,
          tmp_product: null,
        }
      },
      mounted() {
        window.addEventListener('resize', this.handleResize, true);
        window.addEventListener('scroll', this.handleScroll, true);
      },
      created() {
        this.init();
        this.tmp_product = this.product.d;
        this.product.d = '';
        setTimeout(() => {
          this.handleResize();
          this.driver = new Driver(
            {
              allowClose: false,
              opacity: 0,
              doneBtnText: '完成', // Text on the final button
              closeBtnText: '跳过', // Text on the close button for this step
              nextBtnText: '下一步', // Next button text for this step
              prevBtnText: '上一步',
              onReset: (ele)=> {
                this.product.d = '';
              }
            }
          )
          this.product.d = this.tmp_product;
          this.guide();
        }, 100);
      },
      methods: {
        guide() {
          const steps = [
            {
              element: '.imgA',
              popover: {
                title: '鞋底',
                description: '必选，从产品1中选择',
                position: 'bottom'
              }
            },
            {
              element: '.imgB',
              popover: {
                title: '鞋扣',
                description: '必选，从产品2中选择',
                position: 'bottom'
              }
            },
            {
              element: '.imgC',
              popover: {
                title: '鞋带',
                description: '必选，从产品3中选择, 选择后可加入购物车',
                position: 'bottom'
              }
            },
            {
              element: '.imgD',
              popover: {
                title: '饰品',
                description: '非必选，从产品4中选择',
                position: 'bottom'
              }
            }
          ]

          this.driver.defineSteps(steps)
          this.driver.start()
        },
        clickStep(index) {
          this.currentIndex = index;
          this.initData();
        },
        clickSeries(index, shop) {
          // 保存系列下颜色内的数据值
          this.productValue = shop.productValue_color;

          // 当前系列下的颜色
          this.list.color = this.productValue;
          // 默认获取第一个颜色
          let color = Object.keys(this.list.color)[0];

          // 选中第一个颜色值
          this.active.color[this.currentIndex] = this.productValue[color].unique;

          // 设置产品图与价格
          this.setProduct(this.productValue[color]);

          // 当前颜色下的尺码
          this.list.size = this.productValue[color].productValue;

          // 产品详情图
          this.product.detailImg = shop.description;

          // 当前索引
          this.currentIndex = index;

          if (this.flag > 0 && this.active.series[this.currentIndex] == shop.id) {
            this.active.series[this.currentIndex] = undefined;
            this.active.price[this.currentIndex] = 0;
            this.active.color[this.currentIndex] = undefined;
            if (this.currentIndex == 3) {
              this.product.d = ''
            }
          } else {
            this.active.series[index] = shop.id;
            this.flag++;
          }

          this.$forceUpdate();

        },
        clickColor (vals, key) {
          // 颜色选中状态
          if (this.flag1 > 0 && this.active.color[this.currentIndex] == vals.unique) {
            this.active.color[this.currentIndex] = undefined;
          } else {
            this.active.color[this.currentIndex] = vals.unique;
            this.flag1++;
          }

          this.$forceUpdate();
          this.setProduct(vals);

        },
        clickSize (key) {
          // 尺码选中状态
          this.active.size = key;

        },
        setProduct(vals) {
          // 根据当前的索引来匹配点击时值对应的图片所放的位置
          if (this.currentIndex === 0) {
            this.product.a = vals.image;
          } else if (this.currentIndex === 1) {
            this.product.b = vals.image;
          } else if (this.currentIndex === 2) {
            this.product.c = vals.image;
          } else if (this.currentIndex === 3) {
            this.product.d = vals.image;
          }
          // 价格
          this.active.price[this.currentIndex] = vals.price;
          // 图片
          this.product.image = vals.image;
        },
        // 获取当前索引的初始化数据
        initData() {
          let data = this.productData[this.currentIndex];
          let cate_list = {};
          for (let index = 0; index < data.cate_list.length; index++) {
            if (data.cate_list[index].shop_list.length > 0) {
              cate_list = data.cate_list[index];
            }
            break;
          }

          if (cate_list.shop_list && cate_list.shop_list[0]) {
            let shop = cate_list.shop_list[0];

            this.list.color = shop.productValue_color;
            this.product.detailImg = shop.description;
         
            // 当前颜色下的尺码
            let color = Object.keys(this.list.color)[0];
            this.list.size = shop.productValue_color[color].productValue;
            // this.clickSeries(this.currentIndex, shop);
          }
        },
        init() {
          this.$dialog.loading.open('正在加载');
          $.ajax('http://test.hzyctools.com/wap/auth_api/get_product_list_comb', {
            dataType: 'jsonp',
            crossDomain: true,
            success: ((res) => {
              if (res.code === 200) {
                this.$dialog.loading.close();
                let data = res.data;
                if (data) {
                  // 产品信息
                  if (data.parentCates) {
                    this.productData = data.parentCates;
                    this.initData();
                  }
                }
              } else {
                this.$dialog.loading.open('加载失败~');
                setTimeout(() => {
                  this.$dialog.loading.close();
                }, 1000);
              }
            })
          })
        },
        verify() {
          for (let i = 0; i < this.active.series.length; i++) {
            const ele = this.active.series[i];
            if (ele == undefined) {
              this.$dialog.toast({
                mes: '请到产品'+ (i + 1) +'中选择系列',
                timeout: 1000
              });
              return false;
            }
          }

          for (let i = 0; i < this.active.color.length; i++) {
            const ele = this.active.color[i];
            if (ele == undefined) {
              this.$dialog.toast({
                mes: '请到产品'+ (i + 1) +'中选择颜色',
                timeout: 1000
              });
              return false;
            }
          }

          if (this.active.size == '') {
            this.$dialog.toast({
              mes: '请到产品1中选择尺码',
              timeout: 1000
            });
            return false;
          } 
          return true;
        },
        submit() {
          if (!this.verify()) {
            return;
          }
          this.$dialog.loading.open('正在添加');
          /*
            立即购买
            cartNum数量
            uniqueId属性组合的唯一id，多个用逗号隔开
            productId多个商品的组合id，多个用逗号隔开
            is_comb=1表示组合购买
            /cartNum/1/uniqueId/89f3e6c0/productId/1,5,9,13/is_comb/1
            http://test.hzyctools.com/index.php/wap/auth_api/now_buy
            */
          /*
            加入购物车
            cartNum数量1
            uniqueId属性组合的唯一id，多个用逗号隔开
            productId多个商品的组合id，多个用逗号隔开
            is_comb=1表示组合购买
            http://test.hzyctools.com/wap/auth_api/set_cart/cartNum/1/uniqueId/658abcc1/productId/4
          */

          $.ajax('http://test.hzyctools.com/wap/auth_api/set_cart_comb', {
            data: {
              cartNum: 1,
              unique:  this.active.color.join(','),
              productId: this.active.series.join(','),
              is_comb: 1,
            },
            dataType: 'jsonp',
            crossDomain: true,
            success: ((res) => {
              if (res.code === 200) {
                if (res.data && res.data.cartId) {
                  this.$dialog.loading.open('加入成功~');
                  setTimeout(() => {
                    this.$dialog.loading.close();
                    window.location.href = 'http://test.hzyctools.com/wap/store/cart.html?uniqueId=' +
                      res.data.cartId;
                  }, 1000);
                }
              } else {
                this.$dialog.loading.open('加入失败~');
                setTimeout(() => {
                  this.$dialog.loading.close();
                }, 1000);
              }
            })
          })
        },
        // 监听show-product容器宽度 并固定高度为屏幕宽度的1.6
        handleResize() {
          let showProduct = document.getElementsByClassName("show-product")[0];
          let bodyProduct = document.getElementsByClassName("product-main")[0];
          let height = document.documentElement.clientHeight || document.body.clientHeight;
          let footBtn = document.getElementsByClassName("product-foot")[0];
          if (showProduct) {
            let width = showProduct.clientWidth / 1.6;
            showProduct.style.height = width + 'px';

            if (bodyProduct) {
              bodyProduct.style.marginTop = width + 5 + 'px';
              // 所剩高度为，总体高度 - 固定区域高（等于宽）- 底部固定的按钮
              bodyProduct.style.height = height - width - footBtn.clientHeight - 5 + 'px';
            }
          }
        },
        // 监听滚动条，来启用是否滑动到顶部
        handleScroll() {
          let bodyProduct = document.getElementsByClassName("product-main")[0];
          if (bodyProduct) {
            let scrollTop = bodyProduct.pageYOffset || bodyProduct.scrollTop;
            this.isDisplay = scrollTop > 100 ? true : false;
          }
        },
        // 滑动到顶部
        goTop() {
          let bodyProduct = document.getElementsByClassName("product-main")[0];
          if (bodyProduct) {
            bodyProduct.scrollTop = 0;
          }
        },
      }
    })

  </script>

  {include file="public/right_nav" /}
</body>

</html>